<template>
	<view class="content">
		<pagehead :isActive="1"></pagehead>
		<view :class="isphone?'phone_middle':'middle'" :animation="dohide">
			<view class="list">
				<view class="img">
					<image :animation="animationData1" @click="doclick(1)" src="/static/big1.jpg" mode="aspectFit"></image>
				</view>
				<view class="list_txt">
					<span>这是一款记录考试成绩的小工具</span>
				</view>
			</view>
			<view class="list">
				<view class="img">
					<image :animation="animationData2" @click="doclick(2)" src="/static/big2.jpg" mode="aspectFit"></image>
				</view>
				<view class="list_txt">
					<span>这是一款可以管理宿舍的微信小程序</span>
				</view>
			</view>
			<view class="list">
				<view class="img">
					<image :animation="animationData3" @click="doclick(3)" src="/static/big3.jpg" mode="aspectFit"></image>
				</view>
				<view class="list_txt">
					<span>这是我的个人网站</span>
				</view>
			</view>
		</view>
		<view :class="isbig?'isbig':'big'" :animation="biganimationData">
			<view class="cancle" @click="goback">X</view>
			<image class="bigimg" :src="'/static/big'+imgnum+'.jpg'"></image>
		</view>
		<pagefoot></pagefoot>
	</view>
</template>

<script>
	let landscapeOb;
	export default {
		data() {
			return {
				animationData1:{},
				animationData2:{},
				animationData3:{},
				biganimationData:{},
				dohide:{},
				isphone:false,
				isbig:false,
				imgnum:1
			}
		},
		mounted(){
			this.checkPhoneview();
		},
		methods: {
			checkPhoneview(){
				landscapeOb = uni.createMediaQueryObserver(this)
				landscapeOb.observe({
				    orientation: 'landscape'
				}, matches => {
				        this.isphone = !matches
				})
			},
			destroyed () {
			     landscapeOb.disconnect()
			},
			doclick(num){
				if(!this.isphone){
					//PCview下执行
					let big = uni.createAnimation({
						duration: 300,
						timingFunction: 'linear'
					})
					let hide = uni.createAnimation({
						duration: 300,
						timingFunction: 'linear'
					})
					let click_animation = uni.createAnimation({
						duration: 100,
						timingFunction: 'step-end'
					})
					click_animation.scale(0.99).step()
					click_animation.scale(1).step()
					big.opacity(1).step()
					hide.opacity(0.5).step()
					this.isbig=true;
					this.biganimationData = big.export()
					this.dohide = hide.export()
					this.imgnum = num;
					switch(num){
						case 1:
							this.animationData1 = click_animation.export();
						break;
						case 2:
							this.animationData2 = click_animation.export()
						break;
						case 3:
							this.animationData3 = click_animation.export()
						break;
						default:
						break;
					}
					return;
				}
				//手机状态下执行
				getApp().globalData.imgnum = num;
				uni.redirectTo({
					url:'/pages/detail/detail'
				})
			},
			goback(){
				if(!this.isphone){
					//PcVIEW下执行
					let big = uni.createAnimation({
						duration: 300,
						timingFunction: 'linear'
					})
					let hide = uni.createAnimation({
						duration: 300,
						timingFunction: 'linear'
					})
					big.opacity(0).step()
					this.isbig=false;
					this.biganimationData = big.export()
					hide.opacity(1).step()
					this.dohide = hide.export()
					return;
				}
				//手机状态下执行
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../../public/css/public.less');
	.content {
		position: relative;
		.middle{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			z-index: 1;
			.list_txt{
				text-align: center;
			}
		}
		.phone_middle{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			z-index: 1;
			background-color: rgba(122, 122, 122, 0.5);
			padding-bottom: 50rpx;
		}
		.big, .isbig{
			position: absolute;
			top: 260rpx;
			left: 733rpx;
			z-index: 0;
			opacity: 0;
			.cancle{
				color: #afafaf;
				font-size: 30rpx;
				width: 60rpx;
				height: 60rpx;
				border: 5rpx solid silver;
				text-align: center;
				line-height: 60rpx;
				border-radius: 50%;
				z-index: 4;
				position: absolute;
				top:-65rpx;
				left:1030rpx;
				opacity: 0.5;
			}
			.bigimg{
				width: 1050rpx;
				height: 650rpx;
			}
		}
		.isbig{
			z-index: 2;
		}
		
	}
</style>